<!-- prj_3_1.html  -->
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>旅游景点欣赏 </title>
  <style type="text/css">
    /* 使用CSS3让img旋转360度、过渡0.3s,此时不能将a设置为行内块显示方式 ；
      若想让整个超链接均有动画效果，则需要将a设置为行内块显示方式
       a{display:inline-block;} 
       a:hover{transform: rotate(360deg);transition: all 0.3s;}
    */

    /* a:hover img {
      transform: rotate(360deg);
      transition: all 0.3s;

    } */

    * {
      padding: 0;
      margin: 0;
    }

    .div1 {
      width: 1000px;
      height: 780px;
      margin: 0px auto;
      text-align: center;
      padding: 50px;
      box-shadow: 0 0 10px #F1F2F3;
      /*盒子阴影*/
    }

    h3 {
      font-size: 36px;
      color: red;
      padding-bottom: 10px;
    }

    p {
      margin: 5px auto;
      text-indent: 2em;
      font-size: 18px;
      text-align: left;
    }

    ul {
      margin: 5px auto;
      width: 900px;
      list-style-type: none;
      height: 320px;
    }

    li {
      float: left;
      width: 150px;
      height: 130px;
      margin: 15px;
    }

    img {
      border: 0;
      width: 150px;
      height: 100px;
    }

    a:link,
    a:visited,
    a:active {
      text-decoration: none;
    }

    a:hover {
      border-bottom: 4px solid #FF0000;
    }

    a {
      color: black;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <embed src="10.12/Sleep-Away.mp3" width="0" height="0">
  <div class="div1">
    <h3>旅游景点欣赏</h3>
    <hr color="red" size="3">
    <p>万里长城、桂林山水、北京故宫、杭州西湖、苏州园林、安徽黄山、长江三峡、台湾日月潭、承德避暑山庄、西安秦兵马俑等旅游景点区分布于祖国的东西南北各个区域，包括自然景观、历史建筑、人文景观和文物古迹等。</p>
    <ul>
      <li><a href="10.12/image-3-1-wlcc.jpg" target="embed">万里长城<br><img src="10.12/image-3-1-wlcc.jpg" /></a></li>
      <li><a href="10.12/image-3-1-glss.jpg" target="embed">桂林山水<br><img src="10.12/image-3-1-glss.jpg" /></a></li>
      <li><a href="10.12/image-3-1-bjgg.jpg" target="embed">北京故宫<br><img src="10.12/image-3-1-bjgg.jpg" /></a></li>
      <li><a href="10.12/image-3-1-hzxh.jpg" target="embed">杭州西湖<br><img src="10.12/image-3-1-hzxh.jpg" /></a></li>
      <li><a href="10.12/image-3-1-szyl.jpg" target="embed">苏州园林<br><img src="10.12/image-3-1-szyl.jpg" /></a></li>
      <li><a href="10.12/image-3-1-ahhs.jpg" target="embed">安徽黄山<br><img src="10.12/image-3-1-ahhs.jpg" /></a></li>
      <li><a href="10.12/image-3-1-cjsx.jpg" target="embed">长江三峡<br><img src="10.12/image-3-1-cjsx.jpg" /></a></li>
      <li><a href="10.12/image-3-1-ryt.jpg" target="embed">日月潭<br><img src="10.12/image-3-1-ryt.jpg" /></a></li>
      <li><a href="10.12/image-3-1-bssz.jpg" target="embed">避暑山庄<br><img src="10.12/image-3-1-bssz.jpg" /></a></li>
      <li><a href="10.12/image-3-1-bmy.jpg" target="embed">兵马俑<br><img src="10.12/image-3-1-bmy.jpg" /></a></li>
    </ul>
    <embed src="10.12/image-3-1-wlcc.jpg" name="embed" type="text/html" width="440px" height="350px" />
  </div>
</body>

</html>